<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			商品名称：<input type="text" v-model="user"><br>
			商品价格：<input type="text" v-model="price"><br>
			商品重量：<input type="text" v-model="weight"><br>
			商品数量：<input type="text" v-model="num"><br>
			创建时间：<input type="text" v-model="time"><br>
			<input type="button" value="添加" class="btn btn-primary" @click="add()">
			
			<table class="table">
				<tr>
					<td>编号</td>
					<td>商品名称</td>
					<td>商品价格</td>
					<td>商品重量</td>
					<td>商品数量</td>
					<td>创建时间</td>
					<td>操作</td>
				</tr>
				<tr v-for="v in name">
					<td>{{v.id}}</td>
					<td>{{v.user}}</td>
					<td>{{v.price}}</td>
					<td>{{v.weight}}</td>
					<td>{{v.num}}</td>
					<td>{{v.time}}</td>
					<td><input type="button" value="删除" class="btn btn-danger" @click="add(v.id)"></td>
				</tr>
			</table>
			<input type="button" value="<" @click="GetPage(1)">
			<input type="button" v-for="i in sumpage" @click="GetPage(i)" :value="i">
			<input type="button" value=">" @click="GetPage(sumpage)">
		</div>
	</body>
</html>
<script>
	var app=new Vue({
		el:"#app",
		data:{
			name:[],
			user:"",
			price:"",
			weight:"",
			num:"",
			time:"",
			sumpage:"",
			page:"",
			size:"",
			count:"",
		},methods:{
			GetPage(page){
				axios.get("http://127.0.0.1:8080/list?page="+page).then(function(res){
					console.log(res.data.data)
					app.name=res.data.data
					app.sumpage=res.data.sumpage
					app.page=res.data.page
					app.size=res.data.size
					app.count=res.data.count
				})
			},
			add(){
				if(this.user==""|this.price==""|this.weight==""|this.num==""|this.time==""){
					alert("不能为空")
					return false
				}
				var data=new FormData()
				data.append("user",this.user)
				data.append("price",this.price)
				data.append("weight",this.weight)
				data.append("num",this.num)
				data.append("time",this.time)
				axios.post("http://127.0.0.1:8080/add",data).then(function(res){
					console.log(res.data.msg)
					alert(res.data.msg)
					location.reload()
				})		
			},
			del(id){
				axios.get("http://127.0.0.1:8080/del?id="+id).then(function(res){
					console.log(res.data.msg)
					alert(res.data.msg)
					location.reload()
				})
			},
		},created:function(){
			axios.get("http://127.0.0.1:8080/list").then(function(res){
				console.log(res.data.data)
				app.name=res.data.data
				app.sumpage=res.data.sumpage
				app.page=res.data.page
				app.size=res.data.size
				app.count=res.data.count
			})
		}
	})
</script>